<template>
    <div class="cell">
        <div class="c-item" v-for="(item,index) in followList" :key="index" @click="navTo(item)">
            <div class="c-item-img">
               <img :src=item.imgUrl alt="">
            </div>
            <div class="c-item-right">
                <div class="c-item-right-con">
                    <p class="c-item-right-tit">{{item.title}}</p>
                    <p class="c-item-right-info">{{item.content}}</p>
                </div>
                <div class="c-item-right-guan">
                    <p class="c-item-right-guan-cn1">+</p>
                    <p class="c-item-right-guan-cn2">关注</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'news',
    props:{
        followList:Array
    },
    methods:{
        navTo(item){
            this.$router.push({path:'/consultation/details'});
        }
    }
}
</script>
<style lang='less' scoped>
    img{
        width: 100%;
        height: 100%;
    }
    .cell{
        display: flex;
        flex-direction: column;
        width: 100%;
        .c-item{
            display: flex;
            padding: .24rem;
            border-bottom: 1px solid #DFE1E3;
            align-items: center;
            position: relative;
            .c-item-img{
                width: 1.1rem;
                height: 1.1rem;
                border-radius: 50%;
                overflow: hidden;
            }
            .c-item-right{
                margin-left: .24rem;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                // width: 5.6rem;
                .c-item-right-con{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 1.0rem;
                    width: 3.1rem;
                    .c-item-right-tit{
                        font-size: .3rem;
                        color: #4E4E4E;
                        font-weight: 600;
                        
                    }
                    .c-item-right-info{
                        font-size: .28rem;
                        color: #7D7D7D;
                        word-break: break-all;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
                .c-item-right-guan{
                    background: linear-gradient(0deg, #6FC434, #A8E23B);
                    justify-content: center;
                    width: 1.24rem;
                    height: .6rem;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    color:#fff;
                    font-size: .3rem;
                    position: absolute;
                    right: .24rem;
                    .c-item-right-guan-cn2{
                        margin-left: .1rem;
                    }
                }
                
            }
        }
        .n-item:first-of-type{
            padding-top: 0;
        }
    }
</style>